import Vue from 'vue'
import VueRouter from 'vue-router'

const Home = () =>
  import ("../views/home/Home");
const Category = () =>
  import ("../views/category/Category");
const Shopcart = () =>
  import ("../views/shopcart/Shopcart");
const Profile = () =>
  import ("../views/profile/Profile");
const Detail = () =>
  import ("../views/detail/Detail");

// 解决重复点击跳转报错
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch(err => err)
}

const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch(err => err);
};


Vue.use(VueRouter)

const routes = [{
    path: "",
    redirect: "/home"
  }, {
    path: "/home",
    component: Home,
  }, {
    path: "/category",
    component: Category,
  }, {
    path: "/shopcart",
    component: Shopcart,
  }, {
    path: "/profile",
    component: Profile,
  },
  {
    path: "/detail/:id", //动态路由的方式
    component: Detail,
  },
  // {
  //   path: "/detail",
  //   component: Detail,
  // }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router


// 使用插件的方法
// // 1. 导入插件
// import Vue from "vue";
// import VueRouter from "vue-router";

// // 2. 安装插件
// Vue.use(VueRouter);

// // 3. 创建路由对象
// const routes = [

// ]
// const router = new VueRouter({
//     routes
//   })
//   // 4. 导出插件
// export default router